<div class="main">
    <form [formGroup]="form">

        <mat-form-field appearance="outline" class="mid-width">
            <mat-label>Name</mat-label>
            <input data-cy="metadata-name" placeholder="Unique name to identify the devfile" matInput formControlName="name">
        </mat-form-field>
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label>Version</mat-label>
            <mat-error>Examples: 1.0.4, 1.4.7-alpha1</mat-error>
            <input placeholder="Version of the devfile, semver-compatible" matInput formControlName="version">
        </mat-form-field>

        <mat-form-field appearance="outline" class="full-width">
            <mat-label>Display Name</mat-label>
            <input placeholder="Name to display instead of the unique name" matInput formControlName="displayName">
        </mat-form-field>

        <mat-form-field appearance="outline" class="full-width">
            <mat-label>Description</mat-label>
            <textarea matInput formControlName="description" rows="4"></textarea>
        </mat-form-field>

        <mat-form-field appearance="outline" class="mid-width">
            <mat-label>Tags (comma-speparated)</mat-label>
            <input placeholder="Tags to help find the devfile in a registry" matInput formControlName="tags">
        </mat-form-field>
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label>Architectures (comma-separated)</mat-label>
            <input placeholder="Ex: amd64,arm64,ppc64le,s390x" matInput formControlName="architectures">
        </mat-form-field>

        <mat-form-field appearance="outline" class="mid-width">
            <mat-label>Icon</mat-label>
            <input placeholder="Can be a URI or a relative path in the project" matInput formControlName="icon">
        </mat-form-field>
        <span class="icon-display width-10">
            <img width="56" [src]="form.controls['icon'].value">
        </span>

        <mat-form-field appearance="outline" class="width-40">
            <mat-label>Global Memory Limit</mat-label>
            <input placeholder="Informative limit of memory used by the devfile. Ex: 1Gi" matInput formControlName="globalMemoryLimit">
        </mat-form-field>

        <mat-form-field appearance="outline" class="mid-width">
            <mat-label>Project Type</mat-label>
            <input placeholder="Ex: Framework of the project" matInput formControlName="projectType">
        </mat-form-field>
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label>Language</mat-label>
            <input placeholder="Language of the project" matInput formControlName="language">
        </mat-form-field>

        <mat-form-field appearance="outline" class="mid-width">
            <mat-label>Website</mat-label>
            <input placeholder="Official website of the devfile" matInput formControlName="website">
        </mat-form-field>
        <mat-form-field appearance="outline" class="mid-width">
            <mat-label>Provider</mat-label>
            <input placeholder="Information about the provider of the devfile" matInput formControlName="provider">
        </mat-form-field>

        <mat-form-field appearance="outline" class="full-width">
            <mat-label>Support URL</mat-label>
            <input placeholder="Link to a page providing support information" matInput formControlName="supportUrl">
        </mat-form-field>
    </form>

    <button [disabled]="form.invalid" mat-flat-button color="primary" (click)="onSave()">Apply</button>
</div>
